import React, { useState, useEffect, createRef } from 'react'
import HeaderTop from "../../components/HeaderTop/HeaderTop";
import styles from '../../style/childPublic/childPublic.module.less'
import conBack from '../../style/contentBack/contentBack.module.less'
import { govUserListData, userNotGovListData } from '../../apis/bigDate'
import { Button, Input, message, Pagination, Dropdown, Space, Empty } from 'antd';
import { SearchOutlined, DownOutlined } from '@ant-design/icons';
export default function SalesList() {
  const [messageApi, contextHolder] = message.useMessage();
  const key = 'updatable';
  const [title] = useState('经营主体信息监管平台')
  const [contentListTitle] = useState([
    // { id: 1, title: '序号' },
    { id: 2, title: '经营者名称' },
    { id: 3, title: '法定代表人' },
    { id: 4, title: '联系电话' },
    { id: 5, title: '统一社会信用代码' },
    { id: 6, title: '通讯地址' },
    { id: 7, title: '状态' },
  ])
  const [contentList, setContentList] = useState([])
  const [dataList, setDataList] = useState({ area_id: localStorage.getItem('areaId'), area_level: localStorage.getItem('areaLevel'), keywords: '', role_id: 5, pageNum: 1, pageSize: '10', })
  const [total, setTotal] = useState(0)
  const keyWordsRef = createRef();
  const [keyWords, setKeyWords] = useState('')
  const [items] = useState([
    {
      label: '全县经营主体',
      key: '1',
    },
    {
      label: '全县申请认证经营主体',
      key: '2',
    },
  ]);
  const [keyList, setKeyList] = useState(2)
  const [titleList, setTitleList] = useState('全县申请认证经营主体')
  useEffect(() => {
    getList()
  }, [dataList])
  const getList = async () => {
    messageApi.open({
      key,
      type: 'loading',
      content: '数据加载中...',
    });
    if (keyList == 1) {
      const { data } = await govUserListData(dataList)
      if (data.state === 1) {
        setContentList(data.list)
        setTotal(data.count)
        messageApi.open({
          key,
          type: 'success',
          content: '数据加载完成!',
          duration: 1,
        });
      } else {
        messageApi.open({
          key,
          type: 'error',
          content: data.msg,
          duration: 2,
        });
      }
    } else {
      const { data } = await userNotGovListData(dataList)
      if (data.state === 1) {
        setContentList(data.list)
        setTotal(data.count)
        messageApi.open({
          key,
          type: 'success',
          content: '数据加载完成!',
          duration: 1,
        });
      } else {
        messageApi.open({
          key,
          type: 'error',
          content: data.msg,
          duration: 2,
        });
      }
    }
  }
  // 分页
  const itemRender = (_, type, originalElement) => {
    if (type === 'prev') {
      return <a>上一页</a>;
    }
    if (type === 'next') {
      return <a>下一页</a>;
    }
    return originalElement;
  };
  // 搜索
  const search = () => {
    setDataList({ ...dataList, pageNum: 1, keywords: keyWords })
  };
  // 切换页码
  const onChangePage = (page, pageSize) => {
    setDataList({
      ...dataList,
      pageNum: page
    })
  }
  // 导出
  const getData = () => {
    messageApi.open({
      key,
      type: 'loading',
      content: '导出中...',
    });
    window.location.href = `https://iotcloud.sc-iot.cn:22002/areaExport/govUser?access_token=${localStorage.getItem('token')}&keywords=${dataList.keywords}&xian=${localStorage.getItem('areaId')}&role_id=5`
    messageApi.open({
      key,
      type: 'success',
      content: '导出完成!',
      duration: 2,
    });
  };
  const onClick = ({ key }) => {
    setKeyList(key)
    setDataList({ ...dataList, pageNum: 1 })
    if (key == 1) {
      setTitleList('全县经营主体');
      messageApi.open({
        key,
        type: 'success',
        content: '您选择了全县经营主体!',
        duration: 2,
      });


    } else {
      setTitleList('全县申请认证经营主体')

      messageApi.open({
        key,
        type: 'success',
        content: '您选择了全县申请认证经营主体!',
        duration: 2,
      });
    }

  };
  return (
    <div div className={styles.pubBack}>
      {contextHolder}
      <HeaderTop title={title}></HeaderTop>
      <div className={conBack.contentBack}>
        <span className={conBack.topTitle}>{titleList}</span>
        <div className={conBack.contentList}>
          <div className={conBack.topStatus}>
            <div className={conBack.leftList}>
              <Dropdown
                menu={{
                  items,
                  onClick,
                }}
              >
                <a onClick={(e) => e.preventDefault()}>
                  <Space>
                    {titleList}
                    <DownOutlined />
                  </Space>
                </a>
              </Dropdown>
              <Button type="primary" onClick={() => getData()}>导出信息</Button>
            </div>

            {/* 搜索框 */}

            <div className={conBack.rightList}>
              <div className={conBack.searchBtn}>
                <Input type="text" ref={keyWordsRef} value={keyWords} onChange={() => {
                  setKeyWords(keyWordsRef.current.input.value)
                }} placeholder="请输入联系人名称/乡镇查询" />
                <Button type="primary" onClick={() => search()} icon={<SearchOutlined />}>
                  查询
                </Button>
              </div>
            </div>


          </div>
          {/* 列表数据 */}
          {/* 列表 */}
          <div className={conBack.listBox}>
            <table>
              <thead>
                {
                  contentListTitle.map(item => {
                    return (
                      <th key={item.id}>{item.title}  </th>
                    )
                  })
                }
              </thead>
              <tbody className={contentList.length !== 0 ? "" : `${conBack.noShowData}`}>
                {
                  contentList.map((item) => {
                    return (
                      <tr key={item.id}>
                        {/* <td>{item.id}</td> */}
                        <td style={{ width: '20%' }}>{item.name}</td>
                        <td>{item.legal_person}</td>
                        <td>{item.mobile}</td>
                        <td style={{ width: '20%' }}>{item.social_code === undefined || item.social_code === "" ? '暂无' : item.social_code}</td>
                        <td style={{ width: '20%' }}>{item.storage_address === undefined || item.storage_address === "" ? '暂无' : item.storage_address}</td>
                        <td className={!item.logout_state ? `${conBack.show}` : `${conBack.noShow}`}>{!item.logout_state ? '正常' : '非正常'}</td>
                      </tr>
                    )
                  })
                }
              </tbody>
              <tr className={contentList.length === 0 ? `${conBack.emptyData}` : `${conBack.noShowData}`}>
                <td colSpan={7} style={{ textAlign: 'center' }}>
                  <Empty
                    image="http://120.79.70.96:10301/mapimg/kong_he.png"
                    imageStyle={{
                      height: 150,
                    }} />


                </td>
              </tr>
            </table>

          </div>
          {/* 页尾 */}
          <div className={conBack.pagActive}>
            <Pagination total={total} current={dataList.pageNum} defaultCurrent={1} showTotal={(total) => `共 ${total} 条记录`} itemRender={itemRender} pageSize={10} onChange={onChangePage} showSizeChanger={false} />
          </div>
        </div>

      </div>
    </div>
  )
}
